<!-- 用户页 -->
<template>
  <div class="user">
    <van-nav-bar fixed style="background: none" safe-area-inset-top @click-left="() => $router.push({ path: '/' })">
      <template #title>
        <span style="color: #fff">个人中心</span>
      </template>
      <template #left>
        <img style="width: 30px" src="../../assets/images/返回首页 (1).png" alt="" />
      </template>
    </van-nav-bar>
    <!-- 内容 -->
    <div class="avatar">
      <img src="../../assets/images/user/我的头像.png" alt="" />
      <div class="right">
        <span>{{ info.nickname }}</span>
        <span>积分:{{info.score}}</span>
      </div>
    </div>
    <!-- 金刚区 -->
    <div class="center">
      <van-cell-group inset>
        <van-cell title="我的订单" value="全部" is-link to="/my-order" />
        <van-grid icon-size="1.5rem">
          <!-- 跳转页面加 to='路由地址' -->
          <van-grid-item v-for="item in list" :key="item.id" :icon="item.img" :text="item.name" :to='item.to' />
        </van-grid>
      </van-cell-group>
    </div>
    <!-- 地址 -->
    <div class="address">
      <van-cell-group inset>
        <van-cell title="收货地址" is-link to="/address">
          <template #icon>
            <img :src="img[0]" alt="" />
          </template>
        </van-cell>

        <van-cell title="联系客服" is-link @click="callphone()">
          <template #icon>
            <img :src="img[2]" alt="" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { myInfo } from "../../api/user";
import { getConfig } from "../../api/index";

export default {
  name: "",
  data() {
    return {
      list: [
        {
          id: 1,
          img: require("../../assets/images/user/我的01.png"),
          name: "待付款",
          to: "/my-order?type=1",
        },
        {
          id: 2,
          img: require("../../assets/images/user/我的02.png"),
          name: "待发货",
          to: "/my-order?type=2",
        },
        {
          id: 3,
          img: require("../../assets/images/user/我的03.png"),
          name: "待收货",
          to: "/my-order?type=3",
        },
        {
          id: 4,
          img: require("../../assets/images/user/我的04.png"),
          name: "退款/售后",
          to: "/my-order?type=4",
        },
      ],
      img: [
        require("../../assets/images/我的-定位.png"),
        require("../../assets/images/我的-手机号、手机.png"),
        require("../../assets/images/我的-_客服.png"),
      ],
      info:{}
    };
  },
  methods: {
    async init() {
      let res = await myInfo({ userid: localStorage.getItem("userid") });
      if (res.status == 200) {
        this.info = res.data;
      }

      let config = await getConfig();
      if (config.status == 200) {
        this.config = config.data;
      }
    },
    callphone() {
      var phone = this.config.kefuphone;
      try {
        window.ReactNativeWebView.callPhone(phone);
      } catch (eee) {

      }



    }

  },
  computed: {},
  watch: {},
  created() {

    this.init();
  },
  mounted() { },
};
</script>

<style lang="scss" scoped>
.user {
  width: 100%;
  min-height: calc(100vh - 100px);
  background: linear-gradient(to bottom,
      rgb(94, 154, 246) 0%,
      rgb(247, 244, 244) 500px);
  padding-top: 92px;

  .avatar {
    width: 90%;
    margin: 30px auto;
    display: flex;

    img {
      width: 120px;
      height: 120px;
      border: 1px solid #fff;
      border-radius: 50%;
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 30px;
      color: #fff;

      > :first-child {
        font-size: 30px;
      }

      > :last-child {
        background-color: rgba(74, 137, 228, 0.5);
        padding: 10px 20px;
        border-radius: 25px;
      }
    }
  }

  .center {
    margin: 0 auto;
  }

  .address {
    margin-top: 30px;

    img {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
  }
}
</style>